<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航栏底部线条滑动</title>
    <style>
        a {
            text-decoration: none;
            color: #5a5757;
        }
        
        .channel-menu {
            position: relative;
            display: flex;
            justify-content: space-between;
            align-items: center;
            height: 10.66666667vw;
            border-bottom: 1px solid #e7e7e7;
        }

        .channel-menu .tabs {
            overflow: hidden;
            flex: 1;
        }

        .channel-menu .tabs .tabs-list {
            display: flex;
        }

        .channel-menu .tabs .tabs-list a {
            padding: 0 4.26666667vw;
            white-space: nowrap;
            font-size: 3.73333333vw;
            height: 10.66666667vw;
            line-height: 10.66666667vw;
        }

        .channel-menu .tabs .tabs-list .line {
            position: absolute;
            left: 4.26666667vw;
            bottom: 0;
            width: 7.46666667vw;
            height: 0.53333333vw;
            background-color: #fb7299;
            transition: all .3s;
        }

    </style>
</head>

<body>
    <div class="channel-menu">
        <div class="tabs">
            <!-- 很宽的盒子 -->
            <div class="tabs-list">
                <a href="#">首页</a>
                <a href="#">动画</a>
                <a href="#">番剧</a>
                <a href="#">果蔬</a>
                <a href="#">音乐</a>
                <a href="#">舞蹈</a>
                <!-- 红色线 -->
                <div class="line"></div>
            </div>
        </div>
    </div>

    <script>
        const tabsList = document.querySelector('.tabs-list')
        const line = document.querySelector('.line')

        // 事件委托
        tabsList.addEventListener('click', function(e){
            // 点击 a 标签
            if (e.target.tagName === 'A') {
                const n = e.target.offsetLeft 
                line.style.translate = n + 'px'
            }
        })
    </script>
</body>

</html>